<template>
   <div class="main">
      <el-form :model="params" ref="params" label-width="130px" size="small">
       <el-form-item label="区域" prop="agentid" 
          :rules="[{required: true, message: '请选择所属于区域', trigger: 'change'}]">
          <el-select v-model="params.agentid" filterable>
            <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="商家名称" prop="shopname"
          :rules="[
            {required: true, message: '商家名称未填', trigger: 'change'},
            { min: 1,max: 50, message: '商家名称长度在 1 到 50 个字符', trigger: 'blur'}
          ]">
          <el-input placeholder="请输入商家名称" v-model="params.shopname" clearable />
       </el-form-item>
        <el-form-item label="商家位置" required style="margin-bottom: 0">
          <div class="flex city-class">
            <el-form-item prop="provinceId" style="margin-right: 20px;">
              <el-select v-model="params.provinceId" @change="changeProvince" placeholder="--省--">
                <el-option v-for="county in provinceList" :key="'provinceList'+county.id" :label="county.name"
                            :value="county.id"></el-option>
              </el-select>
            </el-form-item>
             <el-form-item prop="cityid" style="margin-right: 20px;">
              <el-select v-model="params.cityid" @change="changeCity" placeholder="--市--">
                <el-option v-for="county in cityList" :key="'cityList'+county.id" :label="county.name"
                            :value="county.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="countyid" style="margin-right: 20px;">
              <el-select v-model="params.countyid" @change="changeCounty" placeholder="--县--">
                <el-option v-for="county in regionList" :key="'regionList'+county.id" :label="county.name"
                            :value="county.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form-item>
      
         <el-form-item label="详细地址" prop="address">
            <el-input style="width:100%" v-model="params.address" placeholder="请输入详细地址" />
          </el-form-item>
      
        <el-form-item label="联系人" prop="shopcontacts"
          :rules="[
            {required: true, message: '联系人姓名未填', trigger: 'change'},
            { min: 1,max: 50, message: '联系人长度在 1 到 50 个字符', trigger: 'blur'}
          ]">
          <el-input placeholder="请输入联系人姓名" v-model="params.shopcontacts" clearable />
        </el-form-item>

        <el-form-item label="商家手机号" prop="shopphone"
          :rules="[{required: true, message: '请输入手机号', trigger: 'change'}, {validator: mobile, trigger: 'blur'}  ]">
          <el-input placeholder="登录账号" style="width: 217px" v-model="params.shopphone" clearable />
        </el-form-item>

        <el-form-item label="法人身份证号">
          <el-input placeholder="请输入法人身份证号" style="width: 217px" v-model="params.idcard" clearable />
        </el-form-item>

        <el-form-item label="身份证附件">
          <div class="upimg-wrap">
            <div class="list flex-row">
              <pt-upload class="update" :size="0.5" :upLoadImg="params.idcardphoto" @getUpLoad="getUpLoad1" />
              <pt-upload class="update" :size="0.5" :upLoadImg="params.idcardnegativephoto" @getUpLoad="getUpLoad2" />
              <div class="msg">
                上传法人身份证正反和反面。<br/>(图片支持JPG、JPEG、PNG格式，<span style="color:#e6a23c">大小不超过512kb</span>)
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="商家LOGO" prop="shoplogo" :rules="[{required: true, message: '商家LOGO未上传', trigger: 'change'}]">
          <div class="upimg-wrap">
            <div class="list flex-row">
              <pt-upload class="update" :size="0.5" :upLoadImg="params.shoplogo" @getUpLoad="getUpLoad3" />
              <div class="msg">
                上传商家LOGO。<br/>(图片支持JPG、JPEG、PNG格式，<span style="color:#e6a23c">大小不超过512kb,建议尺寸150*150</span>)
              </div>
              <div class="demo"><img src="assets/img/demo1.png" alt=""></div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="营业执照">
          <div class="upimg-wrap">
            <div class="list flex-row">
              <pt-upload class="update" :size="5" :upLoadImg="params.businesslicense" @getUpLoad="getUpLoad4" />
              <div class="msg">
                上传营业执照。<br/>(建议正对门店2米处拍摄，图片支持JPG、JPEG、PNG格式，<span style="color:#e6a23c">大小不超过5M</span>)
              </div>
              <div class="demo"><img src="assets/img/demo4.jpg" alt=""></div>
            </div>
          </div>
        </el-form-item>

        <el-form-item style="margin-top: 50px;">
          <el-button type="primary" :loading="issubmitLoading" @click="submitForm('params')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>
<script>
  import * as api from "@/api/sc_shop";
  export default {
    data() {
      return {
        provinceList: [], // 省份列表
        cityList: [], // 城市列表
        regionList: [], // 县级列表
        params: {
          agentid: null, //区域
          shopname: "", // 商家名称
          provinceId: '', // 省id
          cityid: '',  // 城市Id
          countyid: '',// 县区Id
          provinceName: '',// 省id
          cityname: '', // 城市Id
          countyname: '', // 县区Id
          address: '', // 详细地址
          shopcontacts: '', // 联系人
          shopphone: '', // 联系人手机号
          idcard: '', // 法人身份证号
          idcardphoto: '', // 身份证正面
          idcardnegativephoto: '', // 身份证反面
          shoplogo: '', // 商家logo
          businesslicense: '' // 营业执照
        },
        issubmitLoading: false // 提交等待
      }
    },
    computed: {
      restaurants() {
        return this.$store.state.agentList
      }
    },
    methods: {
      mobile(rule, value, callback) {  //手机号验证
        if (!(/^1[0-9]\d{9}$/.test(value))) {
          callback(new Error('手机号码有误，请重填!'))
        } else {
          callback()
        }
      },
      changeProvince(val) { //切省
        this.cityList = []
        this.regionList = []
        this.params.cityname = ''
        this.params.countyname = ''
        this.params.cityid = ''
        this.params.countyid = ''
        const index = this.provinceList.findIndex((item) => {
          return item.id === val
        })
        this.cityList = this.provinceList[index].cityList
        this.params.provinceName = this.provinceList[index].name
      },
      changeCity(val) { //切市
        this.regionList = []
        this.params.countyname = ''
        this.params.countyid = ''
        const index = this.cityList.findIndex((item) => {
          return item.id === val
        })
        this.regionList = this.cityList[index].regionList
        this.params.cityname = this.cityList[index].name
      },
      changeCounty(val) { //切市
        const index = this.regionList.findIndex((item) => {
          return item.id === val
        })
        this.params.countyname = this.regionList[index].name
      },
      getProvinceCityDistrict() { //获取三级联动数据
        api.findProvinceCityDistrict().then(res => {
          if (res.success) {
            this.provinceList = res.data
            if (this.params.provinceId) {
              const k = this.provinceList.findIndex((item) => {
                return item.id == this.params.provinceId
              })
              this.cityList = this.provinceList[k].cityList
              if (this.params.cityid) {
                const i = this.cityList.findIndex((item) => {
                  return item.id == this.params.cityid
                })
                this.regionList = this.cityList[i].regionList
              }
            }
          }
        })
      },
      getUpLoad1(img) { // 上传区域店铺首页图片
        this.params.idcardphoto = img
      },
      getUpLoad2(img) { // 本地添加店内图片
        this.params.idcardnegativephoto = img
      },
      getUpLoad3(img) { // 上传区域店铺首页图片
        this.params.shoplogo = img
      },
      getUpLoad4(img) { // 本地添加店内图片
        this.params.businesslicense = img
      },
      submitForm(formName) { //提交数据
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params }
            if (this.$route.query.id) {
              params.id = this.$route.query.id
              api.busUpdate(params).then(res => {
                if (res.success) {
                  this.$message.success('修改成功！')
                  this.$router.back()
                }
              })
            } else {
              api.busSave(params).then(res => {
                if (res.success) {
                  this.$message.success('新增成功！')
                  this.$router.back()
                }
              })
            }
          }
        })
      },
      getShopInfo(id) { // 获取详情
        api.busInfo({ id }).then(res => {
          if (res.success) {
            for (const key in this.params) {
              if (key === 'provinceId' || key === 'cityid' || key === 'countyid') {
                this.params[key] = res.data[key] ? parseInt(res.data[key]) : ''
              } else {
                this.params[key] = res.data[key] || ''
              }
            }
             this.getProvinceCityDistrict()
          }
        })
      }
    },
    mounted() {
      if (this.$route.query.id) {
        this.getShopInfo(this.$route.query.id)
      } else {
        this.getProvinceCityDistrict()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .main{
    max-width: 960px;
    margin: 0 auto;
  }
  .city-class{
    .city-left{
      flex: 1;
    }
  }
  .upimg-wrap .list {
  min-height: 146px;
  padding: 15px;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  overflow: hidden;
}

.upimg-wrap .list .msg {
  flex: 1;
  font-size: 16px;
}

.upimg-wrap .list .demo {
  width: 148px;
  height: 148px;
  margin-left: 10px;
  overflow: hidden;
  img{
    width: 148px;
    height: 148px;
  }
}

.upimg-wrap .list .update {
  position: relative;
  width: 146px;
  height: 146px;
  margin-right: 10px;
  border: 1px solid #d9d9d9;
}
</style>

